<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert@2.1.2/dist/sweetalert.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
</head>
<style>
    ul,
    li {
        list-style-type: none;
    }

    tr td {
        user-select: all;
    }

    tr td img {
        width: 40px;
        height: 40px;
    }

    .title {
        text-align: center;
        margin-top: 20px;
    }

    .swal-button {
        background-color: #00d1b2;
        border: 1px solid #00d1b2;
    }

    .swal-button:not([disabled]):hover {
        background-color: #00c4a7;
        border: 1px solid #00c4a7;
    }

    .table-container {
        margin-top: 20px;
        max-width: 900px;
    }

    .url {
        width: 500px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>

<body>
    <div id="app">
        <div class="columns is-desktop-only">
            <div class="column">
            </div>
            <div class="column">
                <h1 class="title is-spaced">IPTV channels</h1>
                <div class="select is-primary">
                    <select v-model="category_s">
                        <option value="">Select Category</option>
                        <option v-for="(i,d) in categorys" :key="d">{{i}}</option>
                    </select>
                </div>
                <button @click="onSearch()" class="button is-primary">Search</button>
                <div class="table-container">
                    <table class="table">
                        <thead>
                            <th>Name</th>
                            <th>Category</th>
                            <th class="url">Url</th>
                            <th>Copy</th>
                        </thead>
                        <tbody>
                            <tr v-for="(i,d) in items" :key="i.url" class="columns">
                                <td class="column is-2">{{i.name}}</td>
                                <td class="column is-2">{{i.category}}</td>
                                <td class="column url">{{i.url}}</td>
                                <td class="column is-2" style="text-align: right;"><button :data-clipboard-text="i.url"
                                        @click="onCopy(i,d)" class="button is-primary"
                                        :class="`item_${d}`">Copy</button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="column">
            </div>
        </div>
    </div>

</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            items_all: [],
            items: [],
            categorys: [],
            isCopied: false,
            category_s: '',
        },
        mounted() {
            fetch('./channels.json').then(async response => {
                const items = await response.json();
                this.items_all = items;
                this.items = items.filter(i => i.category === 'XXX');
                this.categorys = [...new Set(items.map(v => v.category))]
            })
        },
        methods: {
            onCopy(i, d) {
                let clipboard = new ClipboardJS(`.item_${d}`);
                clipboard.on('success', function () {
                    swal(`${i.name} Copied Success !`)
                });
                clipboard.on('error', function () {
                    swal(`${i.name} Copied Fail !`)
                });
            },
            onSearch() {
                this.items = this.items_all.filter(i => i.category === this.category_s);

            }
        }
    })

</script>

</html>